<template>
	<div class="wrapper">
		<swiper :options="swiperOption" v-if="showSwiper">
		    <swiper-slide v-for="item of list" :key="item.id">
		    	<img class="swiper-img" :src="item.imgUrl" />
		    </swiper-slide>
		    <div class="swiper-pagination" slot="pagination"></div>
		  </swiper>
	  </div>
</template>

<script>
	export default{
		name: 'HomeSwiper',
		props: {
			list: Array
		},
		data (){
			return {
				swiperOption: {
					pagination:  '.swiper-pagination',
					loop: true,
					autoplay: 5000
				}
				// swiperList: [{
				// 	id: "0001",
				// 	imgUrl:'http://img1.qunarzz.com/piao/fusion/1806/64/cc63aa526e8bb302.png_750x200_d32776c5.png'
				// },{
				// 	id: "0002",
				// 	imgUrl:'http://img1.qunarzz.com/piao/fusion/1805/3b/ef86879aa50e3002.jpg_750x200_2a108508.jpg'
				// }]
			}
		},
		computed: {
			showSwiper (){
				return this.list.length
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.wrapper >>> .swiper-pagination-bullet-active
		background-color #fff
	.wrapper >>> .swiper-pagination-bullets
		bottom 20px	
	.wrapper
		padding-bottom 26.66%
		width 100%
		height 0
		background-color #eee
		overflow hidden
		.swiper-pagination-bullet-active
			background-color red
		.swiper-img
			width 100%
</style>